import { Modal, Radio, Button, Form, Input, Tag, message } from 'antd'
import { ForwardedRef, forwardRef, ForwardRefRenderFunction, useImperativeHandle, useState, useEffect } from 'react'
import axios from '@/http'
import { TUser } from '@type'
import { formatTime } from '@/util'
import './editModal.scss'
const EditModal: ForwardRefRenderFunction<
  { showModal: Function },
  { userColumnData: TUser; changeUserData: Function; onChange: Function }
> = ({ userColumnData, changeUserData, onChange }, childRef: ForwardedRef<{ showModal: Function }>) => {
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
  const { id, time, status, avatar, username, realname } = userColumnData
  const [preavatar, setPreavatar] = useState('')
  const showModal = () => {
    setIsModalVisible(true)
    setTimeout(() => {
      form.resetFields()
    })
  }
  useEffect(() => {
    form.setFieldsValue(userColumnData)
  }, [userColumnData])
  const handleCancel = () => {
    setPreavatar('')
    setIsModalVisible(false)
  }
  const onFinish = (values: any) => {
    console.log(values)
    axios
      .post('/user/updateAll', {
        ...values,
        avatar: preavatar || avatar
      })
      .then(res => {
        if (res.data.error === -1) {
          message.success('更新成功')
          onChange()
          setIsModalVisible(false)
        }
      })
  }
  const [form] = Form.useForm()
  useImperativeHandle(childRef, () => ({
    // changeVal 就是暴露给父组件的方法
    showModal
  }))
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  }
  const changeInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    const realname = e.currentTarget.value
    changeUserData({ ...userColumnData, realname })
  }
  const Avatar = () => {
    return (
      <>
        <img className="edit_modal_img" src={preavatar || avatar} alt="" />
        <Button danger onClick={() => setPreavatar('http://127.0.0.1:8080/api/static/avatar/avatar.jpg')}>
          重置头像
        </Button>
      </>
    )
  }
  return (
    <div>
      <Modal title="编辑" visible={isModalVisible} footer={null} onCancel={handleCancel}>
        <Form {...layout} form={form} onFinish={onFinish} colon={false} initialValues={userColumnData}>
          <Form.Item label="id" name="id">
            <span>{id}</span>
          </Form.Item>
          <Form.Item label="时间" name="time">
            <span>{formatTime(time)}</span>
          </Form.Item>
          <Form.Item label="用户名" name="username">
            <span>{username}</span>
          </Form.Item>
          <Form.Item label="权限" name="status" required shouldUpdate>
            <Radio.Group value={status}>
              <Radio value={1}>
                <Tag color="lime">普通用户</Tag>
              </Radio>
              <Radio value={2}>
                <Tag color="red">管理员</Tag>
              </Radio>
              <Radio value={3}>
                <Tag color="blue">高级用户</Tag>
              </Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="昵称" name="realname" required>
            <Input placeholder="昵称" value={realname} onChange={changeInputValue} />
          </Form.Item>
          <Form.Item label="头像" name="avatar">
            <Avatar></Avatar>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
export default forwardRef(EditModal)
